import { getCompanyInfoOverviewRevenueIndex, getCompanyInfoOverviewGetRecentTenYears } from '@/api/companyDetail/CompanyOverview'
import { EchartsModule } from '@hs-server/components'
import { Col, Modal, Row } from 'antd'
import React from 'react'
import { useEffect, useState } from 'react'
const BusinessIndicators = (props: any) => {
  const { companyCode, handleShow } = props

  const [tabList, setTabList]: any = useState([])

  const [currentItem, setCurrentItem]: any = useState(null)

  const [modalData, setModalData]: any = useState(null)

  const [isModalOpen, setIsModalOpen]: any = useState(false)

  const echartsRef = React.createRef()
  const businessList = [
    {
      label: '营业收入',
      key: 'totalSales',
      keyLevel: 'totalSalesLevel',
      unit: '万人民币',
      span: 12
    },
    {
      label: '主营业务收入',
      key: 'primeBusProfit',
      keyLevel: 'primeBusProfitLevel',
      unit: '万人民币',
      span: 12
    },
    {
      label: '总利润',
      key: 'totalProfit',
      keyLevel: 'totalProfitLevel',
      unit: '万人民币',
      span: 6
    },
    {
      label: '净利润',
      key: 'retainedProfit',
      keyLevel: 'retainedProfitLevel',
      unit: '万人民币',
      span: 6
    },
    {
      label: '资产总额',
      key: 'totalAssets',
      keyLevel: 'totalAssetsLevel',
      unit: '万人民币',
      span: 6
    },
    {
      label: '研发投入',
      key: 'rdExpense',
      keyLevel: 'rdExpenseLevel',
      unit: '万人民币',
      span: 6
    },
    {
      label: '公司市值',
      key: 'mktvalCny',
      keyLevel: 'mktvalCnyLevel',
      unit: '亿人民币',
      span: 6
    },
    {
      label: '负债总额',
      key: 'totalLiability',
      keyLevel: 'totalLiabilityLevel',
      unit: '万人民币',
      span: 6
    },
    // {
    //   label: '用电指数',
    //   key: '',
    //   unit: '',
    //   span: 1
    // },
    {
      label: '纳税总额',
      key: 'totalTax',
      keyLevel: 'totalTaxLevel',
      unit: '万人民币',
      span: 6
    }
    // {
    //   label: '占地面积',
    //   key: '',
    //   unit: '平方米',
    //   span: 1
    // }
  ]

  const [modalConfig, setModalConfig]: any = useState({
    title: '变更详情',
    unit: '万人民币'
  })
  const [xAxisData, setXAxisData]: any = useState([])

  const [seriesData, setSeriesData]: any = useState([])
  const CardList = (data: any) => {
    const { item, dataList } = data

    return (
      <div className="card-list-wrapper card-list-cursor" onClick={() => handleClick(item)}>
        <p className="item-label">{item.label || '-'}</p>
        <p className="item-value">
          {item.value || dataList ? dataList[item.key] || dataList[item.keyLevel] || '-' : null}
          {item.unit && <span className="wrap-style">{item.unit}</span>}
        </p>
      </div>
    )
  }

  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: '#E6E6E6' // 设置 x 轴颜色
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#999999'
      }
    },
    grid: {
      top: 40,
      left: 80, // 调整这个属性
      right: 50,
      bottom: 80
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: true, //是否显示
      data: [modalConfig.title],
      bottom: '0%',
      left: 'center',
      itemGap: 20
    },
    yAxis: {
      name: `单位：${modalConfig.unit}`,
      type: 'value',
      splitLine: {
        show: true, // 显示分隔线
        lineStyle: {
          type: 'dashed', // 设置分隔线为虚线
          color: '#E6E6E6', // 设置分隔线颜色
          width: 1 // 设置分隔线宽度
        }
      },
      axisLine: {
        lineStyle: {
          color: '#eee' // 设置 y 轴颜色
        }
      },
      axisLabel: {
        show: true,
        color: '#999999'
      },
      nameTextStyle: {
        color: '#999999'
      }
    }
  }

  const series = [
    {
      data: seriesData,
      type: 'bar',
      barWidth: '20',
      stack: '1',
      name: modalConfig.title,
      itemStyle: {
        color: '#2080F0',
        borderRadius: [3, 3, 0, 0]
      }
    }
  ]

  async function handleClick(item: any) {
    //经营指标测试提的bug 改成不可点击
    return
    const current = modalData[item.label]
    setIsModalOpen(true)
    if (current && JSON.stringify(current) !== '{}') {
      setModalConfig((pev: any) => {
        return {
          ...pev,
          title: item.label,
          unit: item.unit
        }
      })
      const xData = Object.keys(current).sort((a: any, b: any) => a.split('-')[0] - b.split('-')[0])
      setSeriesData([])
      xData.forEach((key) => {
        setSeriesData((pev: any) => {
          return [...pev, current[key]]
        })
      })
      setXAxisData(xData)
    } else {
      window.$message('info', '暂无数据')
    }
  }

  function getModalData() {
    getCompanyInfoOverviewGetRecentTenYears({ companyCode: companyCode as string }).then((res) => {
      setModalData(res.data)
    })
  }

  async function getList() {
    const res = await getCompanyInfoOverviewRevenueIndex({ companyCode: companyCode as string })
    let list: any = []
    list = res.data
      .map((item: any) => {
        // 判断是否有数据
        const flag = Object.entries(item).filter(([_key, value]) => value).length > 1
        if (flag) {
          return { ...item, label: item.reportYear, value: item.reportYear }
        }
      })
      .filter((item: any) => item)
      .sort((a: any, b: any) => b.value - a.value)

    setTabList(list)

    changeTab(list[0])

    handleShow(list.length > 0 ? true : false)
  }

  function changeTab(tabItem: any) {
    setCurrentItem(tabItem)
  }

  const handleCancel = () => {
    setIsModalOpen(false)
  }

  useEffect(() => {
    getList()
    getModalData()
  }, [companyCode])

  return (
    <div className="business-indicators-wrapper" id="经营指标">
      {tabList.length && (
        <div className="tab-list">
          {tabList.map((tabItem: any, tabIndex: any) => (
            <div className={`${tabItem?.value === currentItem.value ? 'active' : 'tab-list-item'}`} key={tabIndex} onClick={() => changeTab(tabItem)}>
              {tabItem.label || '-'}
            </div>
          ))}
        </div>
      )}
      <Row gutter={[16, 16]}>
        {businessList.map((item: any, index: any) => (
          <Col span={item.span} key={index}>
            <CardList item={item} dataList={currentItem} />
          </Col>
        ))}
      </Row>
      <Modal open={isModalOpen} footer={null} width={770} onCancel={handleCancel}>
        <div className="w-770px h-500px">
          <EchartsModule onRef={echartsRef} options={option} seriesData={series} />
        </div>
      </Modal>
    </div>
  )
}
export default BusinessIndicators
